<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<style>
	*{
		margin: 0;
		padding: 0;
		list-style: none
	}
	.div{
		width: 200px;
		height: 200px;

	}
	.border{
		border:1px solid #ccc;
	}
	#box div{
		width: 300px;
		height: 300px;
		border:1px solid #ccc;
		display: none
	}
	ul{
		width: 300px;

	}
	li{
		width: 100px;
		height: 40px;
		float: left;
		line-height: 40px;
		text-align: center;
			background: #ccc
	}
	li:hover{
		background: pink
	}
	.ace{
		background: red
	}
</style>
<body>
	<div id="box">
		 <ul>
		 	<li @click='index = 0'  :class="{ace: index == 0}">1</li>
		 	<li @click='index = 1'  :class="{ace: index == 1}">22</li>
		 	<li @click='index = 2'  :class="{ace: index == 2}">333</li>
		 </ul>
		 <div :style="{display:index == 0 ? 'block' : 'none'}">111</div>
		 <div :style="{display:index == 1 ? 'block' : 'none'}">22</div>
		 <div :style="{display:index == 2 ? 'block' : 'none'}">3</div>
	</div>
	<script src="vue.js"></script>
	<script>
		const vo = new Vue({ 
			el:'#box',
			data:{
				index:0
			},
		})
	</script>
</body>
</html>